<template>
    <div ref="sliderContainer" @mousemove="onMouseMove" @mouseup="onMouseUp" class="slider-verify-container"
        @mouseleave="onMouseLeave">
        <span v-if="blockState < 100">请按住滑块，拖动到最右边</span>
        <div @mousedown="onMouseDown" :style="{ left: leftP }" class="flex flex-center slider-verify-block">
            <svg-icon size="18px" icon-class="arrow-right-double-line"></svg-icon>
        </div>
        <div :style="{ width: leftP,color:'#ffffff' }" class="slider-verify-complete">
            <span v-if="blockState === 2">验证成功</span>
        </div>
    </div>
</template>

<script setup>
const emit = defineEmits(["success", "failed"]);

const leftP = ref("0");

const blockState = ref(0);

const startP = ref(undefined);

const sliderContainer = ref(undefined);
const onMouseDown = (e) => {
    if (blockState.value !== 2) {
        leftP.value = "0";
        blockState.value = 1;
        startP.value = {
            clientX: e.clientX,
        };
    } else {
        leftP.value = "0";
        blockState.value = 0;
    }
};
const onMouseMove = (e) => {
    if (blockState.value === 1) {
        let width = e.clientX - startP.value.clientX;
        if (width + 40 > 350) {
            leftP.value = 350 - 40 + "px";
            blockState.value = 2;
            emit("success");
        } else {
            leftP.value = width + "px";
        }
    }
};
const onMouseUp = (e) => {
    if (blockState.value !== 2) {
        leftP.value = "0";
        blockState.value = 0;
        emit("failed");
    }
};
const onMouseLeave = (e) => {
    if (blockState.value !== 2) {
        leftP.value = "0";
        blockState.value = 0;
        emit("failed");
    }
};
</script>

<style lang="scss" scoped>
.slider-verify-container {
    --el-input-border-color:#dcdfe6;
    width: 100%;
    height: 40px;
    background-color: transparent;
    position: relative;
    border: solid 1px var(--el-input-border-color);
    text-align: center;
    color: #666666;
    line-height: 40px;
    font-size: 12px;
    user-select: none;
    border-radius: 5px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
}

.slider-verify-complete {
    width: 0;
    height: 40px;
    position: absolute;
    background-color: #57d187;
    left: 0;
    top: 0;
}

.slider-verify-block {
    --el-input-border-color:#dcdfe6;
    width: 38px;
    height: 38px;
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    border: solid 1px var(--el-input-border-color);
    background-size: 50%;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    cursor: move;
}
</style>